<template>
  <div class="margin-top">
    <!-- 表格 -->
    <el-table :data="userInfo ? [userInfo] : []" style="width: 100%">
      <el-table-column label="用户id" prop="id"></el-table-column>
      <el-table-column label="用户名" prop="name"></el-table-column>
      <el-table-column label="用户邮箱" prop="email"></el-table-column>
      <el-table-column label="身份证号" prop="idNumber"></el-table-column>
      <el-table-column label="联系方式" prop="phone"></el-table-column>
      <!-- 头像列 -->
      <el-table-column label="用户头像" :render-header="renderHeader" width="180">
        <template slot-scope="scope">
          <!-- 上传头像组件 -->
          <el-upload
              class="avatar-uploader"
              action="/api/oos/profileImage/upload"
              :show-file-list="false"
              :on-success="(response, file) => handleAvatarSuccess(response, file, scope.row)"
              :before-upload="beforeAvatarUpload">
            <img v-if="scope.row.profileImage" :src="scope.row.profileImage" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改信息按钮 -->
    <el-button type="primary" @click="dialogVisible = true" class="edit-button">修改信息</el-button>

    <!-- 弹出表单 -->
    <el-dialog title="修改用户信息" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth">
          <el-input v-model="form.idNumber"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveChanges">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      userInfo: null, // 假设后端传递的是单个对象
      dialogVisible: false, // 控制弹出表单的显示
      form: {
        name: '',
        email: '',
        idNumber: '',
        phone: ''
      },
      formLabelWidth: '120px' // 表单标签宽度
    }
  },
  created() {
    this.getAllUserInfo();
  },
  methods: {
    async getAllUserInfo() {
      try {
        const response = await axios.get('/api/user/info/get')
        this.userInfo = response.data.data || null; // 使用 || null 来避免未定义的情况
        this.form = {...this.userInfo}; // 初始化表单数据
        console.log(response.data.data); // 调试输出
        console.log(this.userInfo); // 确认获取到的数据
        console.log(this.userInfo.profileImage); // 确认获取到的数据
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },
    renderHeader(h) {
      // 如果需要自定义列头，可以使用这个函数
      return h('span', '头像');
    },
    beforeAvatarUpload(file) {
      // 在上传头像前的校验操作，可以检查文件类型、大小等
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }

      return isJPG && isLt2M;
    },
    handleAvatarSuccess(response, file, user) {
      // 上传成功后的处理
      const newImageUrl = URL.createObjectURL(file.raw);
      this.imageUrl = newImageUrl;
      user.profileImage = newImageUrl; // 更新 userInfo 中的头像 URL
      this.$message.success('上传头像成功!');
    },
    validatePhone(phone) {
      // 验证手机号码
      const phoneRegex = /^1[3-9]\d{9}$/;
      return phoneRegex.test(phone);
    },
    async saveChanges() {
      // 提交表单数据前进行验证
      if (!this.validatePhone(this.form.phone)) {
        this.$message.error('请输入有效的中国大陆手机号码！');
        return;
      }

      try {
        const response = await axios.post('/api/user/info/update', this.form);
        if (response.data.code === 200) {
          this.$message.success('用户信息更新成功');
          this.dialogVisible = false; // 关闭弹出表单
          this.getAllUserInfo(); // 重新获取用户信息
        } else if (response.data.code === 5001) {
          this.$message.error('请输入有效的身份证号码');
          console.error('请输入有效的身份证号码:', response.data.message);
        } else {
          this.$message.error('更新用户信息失败');
          console.error('更新用户信息失败:', response.data.message);
        }
      } catch (error) {
        this.$message.error('更新用户信息失败');
        console.error('更新用户信息失败:', error);
      }
    }
  }
}
</script>

<style scoped>
.margin-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-uploader {
  display: inline-block;
  margin-top: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #999;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

.edit-button {
  position: absolute;
  top: 20px;
  right: 20px;
}
</style>
